	<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1.小图 大图  
			2.小图上面有一个半透明的遮罩(放大镜：绝对定位 半透明)
			放大镜移动范围： 水平：0~小图的宽-放大镜的宽  垂直 0~小图的高-放大镜的高
			放大镜给随鼠标 ：
			水平：鼠标当前位置减去小图的offsetLeft-放大镜的一半width
			垂直：鼠标当前位置减去小图的offsetTop-放大镜的一半高度
			
			left
			if(left<0)left<0
			if(left>300)left=300
			if(top<0)left<0
			if(top>300)top=300
			f.style.left=left+"px"
			
			
			left=Math.min(300,Math.max(0,left));
			max left<0取0 min：0
		    max left>0取left  min left>300 取300 left<300取left			
			
			
			
3.右侧大图，绝对定位
      大图大小：小图的宽高*缩放倍数
      大图移动距离：鼠标移动的距离*缩放倍数*-1
       右侧显示图片区域大小：放大镜的大小*缩放倍数		
	
	
	参数  ：缩放倍数
		-->
		<style>
			#zoom{width:512px ; height: 288px; position: relative;}
			#small{width: inherit;height: inherit;position: relative;}
			#small img{display: block;width: inherit; height: inherit;}
			#mask{width: 100px;height: 100px;position: absolute;background: rgba(255,255,255,0.8);}
			#big{position: absolute; top: 0;left: 522px;overflow: hidden;display: none;}
			#big img{position: absolute;top: 0;left: 0;}
			
		</style>
	</head>
	<body>
		<div id="zoom">
			<div id="small">
				<img src="C:\Users\14129\Pictures\QQ图片20191011151332.jpg">
			</div>
			<div id="big">
				<img src="C:\Users\14129\Pictures\QQ图片20191011151332.jpg">
			</div>
		</div>
		<script>
			function $(selector){
				return document.querySelectorAll(selector);
			}
			var samll=$("#small")[0],
			spic=$("small img")[0],
			big=$("#big")[0],
			bpic=$("#big img")[0],
			mask,maxW,maxH,
			zoom=4;
			small.addEventListener("mouseenter",function(e){
				mask=document.createElement("div");
				mask.id="mask";
				this.appendChild(mask);
				maxW=small.offsetWidth-mask.offsetWidth;
				maxH=small.offsetHeight-mask.offsetHeight;	console.log(maxW,maxH);			
				big.style.display="block";
				big.style.width=mask.offsetWidth*zoom+"px";
				big.style.height=mask.offsetHeight*zoom+"px";
				bpic.style.width=this.offsetWidth*zoom+"px";
				bpic.style.height=this.offsetHeight*zoom+"px";
				
			})
			
			small.addEventListener("mousemove",function(e){
				//放大镜的left,top,使鼠标处于放大镜的中心位置
				 var nleft=e.clientX-$("#zoom")[0].offsetLeft-mask.offsetWidth/2;
				 var ntop=e.clientY-$("#zoom")[0].offsetTop-mask.offsetHeight/2;
				//放大镜可移动范围，限制在小图显示区域内
				// if(nleft<0) nleft=0
				// if(nleft>maxW) nleft=maxW
				// if(ntop<0) ntop=0
				// if(ntop>maxH) ntop=maxH
				nleft = Math.min(maxW,Math.max(0,nleft));
				ntop = Math.min(maxH,Math.max(0,ntop));
				mask.style.top=ntop+"px";
				mask.style.left=nleft+"px";
				bpic.style.top=-ntop*zoom+"px";
				bpic.style.left=-nleft*zoom+"px";
				
			})
			small.addEventListener("mouseleave",function(){
				this.removeChild(mask);
			})
			small.ondblclick = function(){
				mask.style.top=e.clientX-$("#zoom")[0].offsetLeft-mask.offsetWidth/4+"px";
				mask.style.left=e.clientY-$("#zoom")[0].offsetTop-mask.offsetHeight/4+"px";
			}
			
			
			
			
		</script>
	</body>
</html>	
